<template>
  <div class='container'>
    <el-card class="card">
      <!-- 顶部区域 -->
      <div class="top">
         <el-row type="flex" justify="space-between">
           <el-col :span="4" style="display: flex;">
             <span  style="font-size: 14px;font-weight: bold;min-width: 42px;line-height: 40px;margin-right: 20px;;">关键字</span>
             <el-input   placeholder="请输入内容" v-model="query.keyword" > </el-input>
           </el-col>
           <el-col :span="2" >
             <el-button @click="resetForm">清除</el-button>
             <el-button @click="searchFn" type="primary" >搜索</el-button>
           </el-col>
         </el-row>
          <el-alert
             :title="`数据一共${total}条`"
             type="info"
             style="margin-top: 20px;margin-bottom: 15px"
             show-icon>
           </el-alert>
      </div>
      <!-- 表格区域 -->
      <div class="table">
        <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
         :formatter="formatterType"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="题目编号">
        <template slot-scope="scope">
          <a @click="clickFn(obj.id)" v-for="(obj,index) in scope.row.questionIDs" :key="index" href="#" style="color: rgb(0, 153, 255);display:block">{{obj.number}}</a>
      </template>
      </el-table-column>
       <el-table-column
        prop="addTime"
        label="录入时间">
      </el-table-column>
       <el-table-column
        prop="totalSeconds"
        label="答题时间(s)">
      </el-table-column>
       <el-table-column
        prop="accuracyRate"
        label="正确率(%)">
      </el-table-column>
       <el-table-column
        prop="userName"
        label="录入人">
      </el-table-column>
       <el-table-column
        label="操作">
        <template slot-scope="scope">
        <el-button @click="delFn(scope.row.id)" type="danger" icon="el-icon-delete"  plain circle></el-button>
        </template>
      </el-table-column>
    </el-table>
   </div>
     <div class="div-pagination">
     <!-- 分页 -->
     <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[20,30,50,100]"
      :page-size="query.pagesize"
      layout="sizes, prev, pager, next, jumper"
      :total="total">
     </el-pagination>
     </div>
      <!-- 弹窗 -->
       <el-dialog
       title="题目预览"
       :visible.sync="dialogVisible"
       width="50%"
       @close="closeFn">
       <questions-preview v-if="dialogVisible" :questionId="questionId"  @close="closeFn"/>

     </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { questionType } from '@/api/hmmm/constants'
import questionsPreview from '../components/questions-preview.vue'

import { randoms, removeRandoms } from '@/api/hmmm/questions'
export default {
  data () {
    return {
      tableData: [],
      query: {
        page: 1,
        pagesize: 20,
        keyword: null
      },
      dialogVisible: false,
      questionId: null,
      total: 0,
      currentPage4: 1
    }
  },
  components: {
    questionsPreview
  },
  created () {
    this.searchFn()
  },
  methods: {
    resetForm () {
      this.query.keyword = null
    },
    async searchFn () {
      const res = await randoms(this.query)
      // console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 删除按钮
    async delFn (id) {
      const confirmRes = await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      // console.log(confirmRes, id)
      if (confirmRes === 'cancel') return this.$message('您取消了删除')
      const res = await removeRandoms({ id: id })
      // console.log(res)
      if (res.status === 200) {
        this.$message.success('您已删除成功')
        this.searchFn()
      } else {
        this.$message.info('删除失败')
      }
      // this.searchFn()
    },
    clickFn (id) {
      // console.log(id)
      this.dialogVisible = true
      this.questionId = id
    },
    closeFn () {
      this.dialogVisible = false
    },
    // 格式化题型
    formatterType (row, column, cellValue, index) {
      const obj = questionType.find(obj => {
        return obj.value == cellValue
      })
      return obj ? obj.label : '未知'
    },
    // 页面条数改变时
    handleSizeChange (newSize) {
    // console.log(a);
      this.query.pagesize = newSize
      this.query.page = 1
      this.searchFn()
    },
    // 当前页面改变时
    handleCurrentChange (newPage) {
    // console.log(b);
      this.query.page = newPage
      this.searchFn()
    }
  }
}
</script>

<style scoped >
.card {
  padding: 10px 15px;

}
.div-pagination{
  position: relative;
  margin-top: 10px;
  height: 20px;
}
.pagination{
  position: absolute;
  right: 0;
}

</style>
